<template>
  <div>
    <!-- <quill-editor
      ref="myQuillEditor"
      v-model="content"
      :options="editorOption"
    /> -->

    <!-- Or manually control the data synchronization -->
    <quill-editor
      :content="content"
      :options="editorOption"
      @change="onEditorChange($event)"
    />
  </div>
</template>

<script>
import { quillEditor, Quill } from "vue-quill-editor";
import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Quill.register("modules/ImageExtend", ImageExtend);
export default {
  components: {
    quillEditor,
  },
  data() {
    return {
      content: "<h2>I am Example</h2>",
      editorOption: {
        modules: {
          ImageExtend: {
            loading: true,
            name: "good_pic",
            size: 0.02,
            action: "http://kumanxuan1.f3322.net:8360/admin/upload/goodNewPic",
            response: (res) => {
              return res.data.fileUrl;
            },
            headers: (xhr, formData) => {
              //xhr.setRequestHeader(
              //  "X-Nideshop-Token",
              //  localStorage.getItem("token")
              //);
            }, // 可选参数 设置请求头部
            sizeError: () => {
              return this.$message.error("图片超过50kb");
            }, // 图片超过大小的回调
          },
          toolbar: {
            container: [
              ["bold", "italic", "underline", "strike"], // 加粗，斜体，下划线，删除线
              ["blockquote", "code-block"], //引用，代码块
              [{ header: 1 }, { header: 2 }], // 几级标题
              [{ list: "ordered" }, { list: "bullet" }], // 有序列表，无序列表
              [{ script: "sub" }, { script: "super" }], // 下角标，上角标
              [{ indent: "-1" }, { indent: "+1" }], // 缩进
              [{ direction: "rtl" }], // 文字输入方向
              [{ size: ["small", false, "large", "huge"] }], // 字体大小
              [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
              [{ color: [] }, { background: [] }], // 颜色选择
              [{ font: [] }], // 字体
              [{ align: [] }], // 居中
              ["link", "image"],
              ["clean"],
            ],
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id);
              },
            },
          },
        },
      },
    };
  },

  methods: {
    onEditorBlur(quill) {
      console.log("editor blur!", quill);
    },
    onEditorFocus(quill) {
      console.log("editor focus!", quill);
    },
    onEditorReady(quill) {
      console.log("editor ready!", quill);
    },
    onEditorChange({ quill, html, text }) {
      console.log("editor change!", quill, html, text);
      this.content = html;
      console.log(this.content);
    },
  },
  computed: {
    // editor() {
    //   return this.$refs.myQuillEditor.quill;
    // },
  },
  mounted() {
    // console.log("this is current quill instance object", this.editor);
  },
};
</script>
 
<style lang = "less" scoped>
</style>